<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
request.setCharacterEncoding("UTF-8");
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 <base href="<%=basePath%>">
<title>应用配置</title>

<jsp:include page="/WEB-INF/jsp/common/common.jsp"></jsp:include>

<script src="<%=path%>/js/jquery.divbox.js" type="text/javascript"></script>
<script>
	history.forward();
	
	$(document).ready(function() {
		isReadyIframe();
		loadApp();
		queryApp(1);
	});
	
	function isReadyIframe(){
		var iframe = $(window.parent.document).find("#iframe").length;
		if(iframe==0){
			window.location.href="<%=basePath%>index.jsp";
		}
	}
	
	//加载应用下拉框
	function loadApp(){
		$.ajax({
				url : "<%=path%>/appManager/queryAllAppList?"+new Date().getTime(),
				type : 'POST',
				async : true,
				dataType:'json',
				success : function(appList) {
					if($.validate(appList))return;
					//业务处理
					var appSelect = document.getElementById("appSelect");
					
					appSelect.options.length = 0;
					
					var opt = new Option();
					opt.text = "--请选择--";
					opt.value = "";
					appSelect.add(opt);
					
					if (appList != null) {
						for (var i = 0; i < appList.length; i++) {
							var option = new Option();
							option.text = appList[i].appname;
							option.value = appList[i].appid;
							appSelect.add(option);
						}
					}
				}
			});
	 }
	 

	//点击“查询（app）”（按照appname分页查询app）
	function queryApp(pageIndex){
		var appId = $("#appSelect").val();
		
		$.openLoading();
		//按照条件执行查询操作
		$.ajax({
			url : "<%=path%>/appManager/queryByAppName?"+new Date().getTime(),
			type : 'POST',
			async : true,
			data:{
				appId:appId,
				pageIndex:pageIndex
			},
			dataType:'json',
			success:function(appPage){
				$.closeLoading();
				if($.validate(appPage))return;
				
				//业务处理
				if(null != appPage){
					var buttonStr = "<a href='' onClick='viewApp(this);return false'>编辑</a> <a href='' onClick='delApp(this);return false'>删除</a>";
					var fieldNames = "APPID,APPNAME";
					var tableContent = creatTable(fieldNames,appPage,buttonStr);
					var tableObj = $("#appTable");
					tableObj.find("tbody").remove();
					tableObj.append(tableContent);
					
					var strPage = creatChannelPage(pageIndex,6,appPage.maxPage,"5");
					var pageDIV = $("#appPageDIV");
					pageDIV[0].innerHTML="";
					pageDIV.append(strPage);
				}
			}
		});
	}
	
	//点击“删除（app）”
	function delApp(app){
		var delTr = $(app).parent('td').parent('tr')[0];
		var appId = delTr.childNodes[0].innerHTML;
			
			$.dialog({
				type: "warn",//success,error
				content: "您确定要删除该条记录吗？",
				onOk: function() {
					$.openLoading();
					$.ajax({
							url : "<%=path%>/appManager/delApp?"+new Date().getTime(),
							type : 'POST',
							async:true,
							dataType:'json',
							data:{
								appId:appId
							},
							success : function(data) {
								$.closeLoading();
								
								if($.validate(data)) return;
								//业务处理
								loadApp();
								queryApp(1);
							}
						});	 
				}
			});
	}
	
	//点击“新增”(弹出层)
	function addApp(){
		$("#appId").removeAttr("readonly");
		$("#appId").css("background","#fff");
		$("#appId").bind("blur",function (){ checkAppIdIfUsed() });
		$("#appId_span").css("display","inline");
		
		$("#addOrUpdateDiv").OpenDiv();
		
		disabledBtn("addAppTranstypeBtn");
	}
	
	//“新增(app)”时检查输入的“应用ID”是否已经被占用
	function checkAppIdIfUsed(){
		//“应用ID”输入框内容改变时检查输入的应用ID在系统中是否已经存在

			 var appId = $("#appId").val();
			 $.ajax({
					url : "<%=path%>/appManager/queryAppByAppId?"+new Date().getTime(),
					type : 'POST',
					async : true,
					data:{
						appId:appId
					},
					dataType:'json',
					success : function(data) {
						if(data != null){//业务处理
							$.message("error", "该应用接口代码已被占用，请更换");

							$("#appId").focus();//将光标重新 移入应用ID输入框
						} 
					}
			});
	}
	
	//点击“查看（app）”
	function viewApp(app){
		var delTr = $(app).parent('td').parent('tr')[0];
		var appId = delTr.childNodes[0].innerHTML;
		var appName = delTr.childNodes[1].innerHTML;
		$("#appId").val(appId);
		$("#appName").val(appName);
		
		$("#appId").unbind("blur");
		$("#appId").attr("readonly","readonly");
		$("#appId").css("background","#ccc");
		$("#appId_span").css("display","none");
	
		$("#addOrUpdateAppBtn").val("更改");
		enabledBtn("addAppTranstypeBtn");

		loadAppTranstype(appId);
		
		$("#addOrUpdateDiv").OpenDiv();
		
	}
	
	//加载与该app关联的appTranstype
	function loadAppTranstype(appId){
		$.ajax({
			url : "<%=path%>/appManager/queryAppTranstypeByFkAppId?"+new Date().getTime(),
			type : 'POST',
			async : true,
			data:{
				appId:appId
			},
			dataType:'json',
			success : function(appTranstypeList) {
				//先清空表格的原有数据
				$("tr[name='appTranstype']").remove();
				
				if($.validate(appTranstypeList)) return;
				
				//业务处理
				for(var i = 0;i<appTranstypeList.length;i++){
					$("#appTranstypeTableHeader").after("<tr name = 'appTranstype' id='"+appTranstypeList[i].transtypeId+"' name='existedAppTranstype'><td>"+appTranstypeList[i].transCode+"</td><td>"+appTranstypeList[i].transName+"</td><td><a href='' onclick='delAppTranstype("+appTranstypeList[i].transtypeId+");return false'>删除</a></td></tr>");
				}
			}
		});
	}

	//点击“删除（appTranstype）”
	function delAppTranstype(transtypeId){
		
		$.dialog({
			type: "warn",//success,error
			content: "您确定要删除该条记录吗？",
			onOk: function() {
				$.openLoading();
				$.ajax({
					url : "<%=path%>/appManager/delAppTranstypeByAppTranstypeId?"+new Date().getTime(),
					type : 'POST',
					async : true,
					data:{
						appTranstypeId:transtypeId
					},
					dataType:'json',
					success : function(data) {
						$.closeLoading();
						
						if($.validate(data)) return;
						
						//业务处理
						$("#"+transtypeId).remove();//从表格中移除该appTranstype
					}
				});
			}
		});
	}
	
	//隐藏“addOrUpdateDiv”
	function closeAddOrUpdateDiv(){
		$("#addOrUpdateDiv").CloseDiv();
		
		$("#addOrUpdateAppBtn").val("新增");
		
		//清空表格的原有数据
		$("tr[name='appTranstype']").remove();
		
		$("input[name='appTranstype_input']").val("");
		$("input[name='app']").val("");
	}
	
	//“新增/更改(app)”
	function addOrUpdateApp(){
		var appId = $.trim($("#appId").val());
		var appName = $.trim($("#appName").val());
		
	  	if(appId.length == 0)
        {
	  		$.message("error", "请输入应用接口代码");
			$("#appId").focus();
			return;
		}else if(appId.length > 20){
			$.message("error", "应用接口代码长度不能超过20个字符");
			$("#appName").focus();
			return;
		}
	  	
		if(appName.length == 0)
		{
			$.message("error", "请输入应用接口名称");
			$("#appName").focus();
			return;
		}else if(appName.length > 50){
			$.message("error", "应用接口名称长度不能超过50个字符");
			$("#appName").focus();
			return;
		} 
		
		var addOrUpdateAppBtn = $("#addOrUpdateAppBtn").val();
		
		var saveOrUpdate;
		if(addOrUpdateAppBtn == "新增"){
			saveOrUpdate = "save";
		}
		if(addOrUpdateAppBtn == "更改"){
			saveOrUpdate = "update";
		}
		
		$.openLoading();
		 $.ajax({
				url : "<%=path%>/appManager/saveOrUpdateApp?"+new Date().getTime(),
				type : 'POST',
				async : true,
				data:{
					appId:appId,
					appName:appName,
					flag:saveOrUpdate
				},
				dataType:'json',
				success : function(data) {
					$.closeLoading();
					
					if($.validate(data)) return;
					//业务处理
					if(addOrUpdateAppBtn == "新增"){
						$("#addOrUpdateAppBtn").val("更改");
						
						$("#appId").val(appId);
						$("#appId").unbind("blur");
						$("#appId").attr("readonly","readonly");
						$("#appId").css("background","#ccc");
						$("#appId_span").css("display","none");
						
						enabledBtn("addAppTranstypeBtn");
					}
					
					loadApp();
					queryApp(1);//重新加载  app 信息的表格
				}
		});
	}
	
	//“新增（appTranstype）”时检查输入的“交易代码”在该 app 中是否已经存在
	function checkAppTransCodeIfUsed(){

	    var appId = $("#appId").val();
	    var transCode =	$("#transCode").val();
	    
		$.ajax({
				url : "<%=path%>/appManager/checkTransCodeIfUsedInOneApp?"+new Date().getTime(),
				type : 'POST',
				async : true,
				data:{
					appId:appId,
					transCode:transCode
				},
				dataType:'json',
				success : function(data) {
					if(data != null){//业务处理
						$.message("error", "该交易代码在该应用接口中已被占用，请更换");
						
						$("#transCode").focus();//将光标重新 移入应用ID输入框
					} 
				}
		});
	}
	
	//点击"新增(appTranstype)"
	function addAppTranstype(){
		var appId = $("#appId").val();
		var transCode = $("#transCode").val();
		var transName = $("#transName").val();
		
	  	if(transCode==""){
	  		$.message("error", "请输入交易代码");
			return;
		}else if (transCode.length > 20){
			$.message("error", "交易代码长度不能超过20个字符");
			return;
		}
	  	
		if(transName==""){
			$.message("error", "请输入交易名称");
			return;
		} else if (transName.length > 50){
			$.message("error", "交易名称长度不能超过50个字符");
			return;
		}
		
		$.openLoading();
		$.ajax({
			url : "<%=path%>/appManager/saveAppTranstype?"+new Date().getTime(),
			type : 'POST',
			async : true,
			data:{
				transCode:transCode,
				transName:transName,
				fkAppId:appId
			},
			dataType:'json',
			success : function(data) {
				$.closeLoading();
				
				if($.validate(data))  return;
				//业务处理
				$("input[name='appTranstype_input']").val("");
				
				loadAppTranstype(appId);
			}
		});
	}
	
	//禁用按钮(传入要禁用的按钮Id)
	function disabledBtn(btnId){
		var disabledBtn = $("#"+btnId+"");
		disabledBtn.attr("disabled","disabled");
		disabledBtn.css("background","gray");
	}
	
	//启用按钮style="background-image: url('');" 
	function enabledBtn(btnId){
		var enabledBtn = $("#"+btnId+"");
		enabledBtn.removeAttr("disabled");
		enabledBtn.css("backgroundImage","url('./images/button_1.png')");
	}
</script>

</head>

<body>
	<div class="current">
           <table class="current_table_1">
              <tbody><tr class="f2">
                <td><img src="./images/current_1.jpg"></td>
                  <td class="current_table_1_td">
                  <img src="images/current_1.png">&nbsp;您现在的位置：&nbsp;
                  <span style=" color:#136bab; ">应用管理
                  <span style="padding:0 5px; font-weight:bold; line-height:28px;">&gt;</span>应用配置
                  </span>
                  </td>
                  <td><img src="./images/current_3.jpg"></td>
              </tr>
           </tbody></table>
      </div>

	<%--显示app的表格 --%>
	<table border="1" class="table_02" style="height:150px">
  		<tr height="50px">
  			<td colspan="2" align="center">
				应用接口名称：&nbsp;<select id="appSelect"><option value="">--请选择--</option></select>&nbsp;&nbsp;
				<input type="button" id="queryAppBtn" class="input_button_1" value="查询" onclick="queryApp(1)"/>
				<input type="button" id="addAppBtn" class="input_button_1"  value="新增" onclick="addApp()"/>
			</td>
  		</tr>
  		<tr>
  			<td valign="top">
	  			<div id="appDIV" style="width:98%;margin:5px" >
			  		<table class="table_02" id="appTable">
			  		<thead>
		              <tr>
		                  <th style="width:40%">应用接口代码</th>
		                  <th style="width:40%">应用接口名称</th>
		                  <th style="width:20%">操作</th>
		              </tr>
		              </thead>
		              <tbody>
					  </tbody>
		            </table>
	  				 <div id="appPageDIV"  class="page"></div>
	  			</div>
  			</td>
  		</tr>
  	</table>
  	
  	<%--点击“新增”或“查看”弹出窗口 --%>
	<div id="addOrUpdateDiv" style="display:none;width:80%;padding-bottom: 15px;height: 42%;margin-top:-50px ">
		<div class="table_title_div"">
				<table class="table_title" style="width:100% ;height: 20px;">
					<tr>
						<td width="10%"></td>
						<td width="80%" id="interfaceName"></td>
						<td width="10%" align="right"><img src="<%=path %>/images/closedown.gif" alt="关闭"  onclick="closeAddOrUpdateDiv()"/></td>
					</tr>
				</table>
		</div>
		
		<div style="height: 95%;overflow-y: scroll;">
		<table class="table_02" id="saveAppTable" style="width: 91%" align="center" >
			<tr>
				<td style="border-right: 0px;padding: 10px 0px 10px 70px">
					应用接口代码：<input type="text" name="app" class="input_text" id="appId"/><span id="appId_span" class="red">*</span>
				</td>
				<td style="border-right: 0px;padding: 10px 50px 10px 40px">
					应用接口名称：<input type="text" name="app" class="input_text" id="appName"/><span class="red">*</span>
				</td>
				<td style="border-left: 0px;padding: 10px 50px 10px 0px">
					<input class="input_button_1" type="button" id="addOrUpdateAppBtn" value="新增" onclick="addOrUpdateApp()" />
				</td>
			</tr>
			<tr>
				<td colspan="3" style="padding: 10px 30px">
					<table class="table_02">
						<thead>
							<tr id="appTranstypeTableHeader">
								<th style="width:40%">交易代码</th>
								<th style="width:40%">交易名称</th>
				                <th style="width:20%">操作</th>
							</tr>
							<tr>
								<td width="40%" style="padding: 10px"><input class="input_text" name="appTranstype_input" id="transCode" type="text" onblur="checkAppTransCodeIfUsed()"/></td><%--transCode --%>
								<td width="40%" style="padding: 10px"><input class="input_text" name="appTranstype_input" id="transName" type="text" /></td><%--transName --%>
							    <td width="20%" style="padding: 10px"><input class="input_button_1" type="button" id="addAppTranstypeBtn" value="新增" onclick="addAppTranstype()"/></td>
							</tr>		
						</thead>
					</table>
				</td>
			</tr>
		</table>
		</div>
	</div>
</body>
</html>